<!--
/**
 * author: vformAdmin
 * email: vdpadmin@163.com
 * website: https://www.vform666.com
 * date: 2021.08.18
 * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
 */
-->

<template>
  <el-col v-bind="layoutProps">
    <div
      class="container-wrapper"
      :class="[
        customClass,
        {
          selected: designer.selectedId === field.id,
          designer: designer.designStatus,
        },
      ]"
    >
      <slot />

      <div v-if="designer.selectedId === field.id" class="container-action">
        <i
          v-if="parentId"
          class="el-icon-back"
          title="选中父组件"
          @click.stop="selectField(parentId)"
        />
        <i
          v-if="field.type !== 'tab'"
          class="el-icon-copy-document"
          title="复制"
          @click.stop="cloneContainer(field)"
        />
        <i
          class="el-icon-delete"
          title="删除"
          @click.stop="removeUnit(field.id)"
        />
      </div>

      <div
        v-if="designer.selectedId === field.id"
        class="drag-handler container-drag"
      >
        <i class="el-icon-rank" title="拖动" />
        <i>{{ field.title }}</i>
        <i v-if="field.options.hidden === true" class="iconfont icon-hide" />
      </div>
    </div>
  </el-col>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
// import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin";
// import containerMixin from "./containerMixin";

export default {
  name: "container-wrapper",
  // mixins: [containerMixin],
  props: {
    field: Object,
    parentId: String,
    parentList: Array,
    children: Array,
    indexOfParentList: Number,
    designer: Object,
  },
  computed: {
    customClass() {
      return this.field.options.customClass
        ? this.field.options.customClass.join(" ")
        : "";
    },
    layoutProps() {
      return {
        span: this.field.options.span || 24,
        offset: this.field.options.offset || 0,
        push: this.field.options.push || 0,
        pull: this.field.options.pull || 0,
      };
    },
  },
  mounted() {
    // console.log(this.designer.selectedId, this.field.id);
  },
  methods: {
    // 选中表单单元
    selectField(field) {
      // console.log("selectField", field);
      if (this.designer.designStatus) {
        this.designer.setSelected(field);
      }
    },
    cloneContainer(unit) {
      if (this.parentList) {
        const newCon = this.designer.copyNewFieldUnit(unit);
        this.designer.addFieldLib(newCon);
        this.parentList.splice(this.indexOfParentList + 1, 0, {
          id: newCon.id,
          children: [],
        });
        this.designer.setSelected(newCon.id);
        this.designer.emitHistoryChange();
      }
    },
    removeUnit(id) {
      if (this.parentList) {
        this.parentList.splice(this.indexOfParentList, 1);
        this.designer.removeFieldLib(id);
        const run = (child) => {
          if (child.length) {
            child.forEach((item) => {
              this.designer.removeFieldLib(
                typeof item === "string" ? item : item.id
              );
              if (typeof item !== "string") run(item.children);
            });
          }
        };
        run(this.children);
        let nextSelect =
          this.parentList.length > this.indexOfParentList
            ? this.indexOfParentList
            : this.indexOfParentList - 1;
        if (this.parentList.length > 0) {
          nextSelect =
            this.parentList.length > this.indexOfParentList
              ? this.indexOfParentList
              : this.indexOfParentList - 1;
        } else nextSelect = this.parentId;
        this.designer.setSelected(
          nextSelect
            ? typeof nextSelect === "string"
              ? nextSelect
              : nextSelect.id
            : null
        );
        this.designer.emitHistoryChange();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/global.scss";
.container-wrapper {
  position: relative;
  margin-bottom: 5px;

  &.selected {
    outline: 2px solid $--color-primary !important;
  }
  .designer {
    outline: 1px dashed rgba(170, 170, 170, 0.75);
  }

  .container-action {
    position: absolute;
    //bottom: -30px;
    bottom: 0;
    right: -2px;
    height: 28px;
    line-height: 28px;
    background: $--color-primary;
    z-index: 999;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .drag-handler {
    position: absolute;
    top: -2px;
    //bottom: -24px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
    left: -2px;
    height: 22px;
    line-height: 22px;
    background: $--color-primary;
    z-index: 9;
    opacity: 0.5;

    i {
      font-size: 14px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: move;
    }
  }
  &:hover {
    .drag-handler {
      opacity: 1;
    }
  }
}
</style>
